<template>
	<view :style="skin" class="content infoConfirm">
		<view class="mainBox">
			<fui-preview :previewData="previewData1"></fui-preview>
			<fui-preview :previewData="previewData2"></fui-preview>
			<fui-preview :previewData="previewData3"></fui-preview>

		</view>

		<view class="btnModule">
			<view class="checkboxBox">
				<u-checkbox-group v-model="checkList" @change="checkboxChange">
					<u-checkbox shape="circle" name="consent" activeColor="var(--subjectColor)"
						labelColor="var(--subjectTextColor)" labelSize="14" inactiveColor="var(--subjectColor)"
						:label="$t('login.readAndAgree')"></u-checkbox>
				</u-checkbox-group>
				<view class="skipWebView" @click="skipWebView()">
					{{$t('login.serverAgreement')}}
				</view>

			</view>

			<u-button color="var(--subjectColor)" @click="handleNext">{{$t('login.nextPage')}}
			</u-button>
			<fui-safe-area></fui-safe-area>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import { getNewYMD } from '@/utils/index.js'
	import { registersav } from '@/api/login.js'
	export default {
		data() {
			return {
				userObj:{},
				checkList: [],
				btnPass: false,
				previewData1: {
					label: '',
					list: [
						{
							label: this.$t('login.surname'),
							value: '',
						},
						{
							label: this.$t('login.givenName'),
							value: '',
						},{
							label: this.$t('login.alias'),
							value: ''
						}, {
							label: this.$t('login.gender'),
							value: ''
						}, {
							label: this.$t('login.birth'),
							value: ''
						},
						{
							label: this.$t('login.phoneNumber'),
							value: ''
						},
						{
							label: this.$t('login.idNumber'),
							value: ''
						},
						{
							label: this.$t('login.Dateregistration'),
							value: ''
						}
					]
				},
				previewData2: {
					label:'',
					list: [{
							label:  this.$t('login.agentID'),
							value: '',
						}, {
							label: this.$t('login.agentName'),
							value: ''
						}, {
							label: this.$t('login.guarantor'),
							value: ''
						}, {
							label:  this.$t('login.guarantorID'),
							value: ''
						}, {
							label: this.$t('login.guarantorPhone'),
							value: ''
						},
						{
							label: this.$t('login.guarantorAdd'),
							value: ''
						},
						{
							label: this.$t('login.housing'),
							value: ''
						},
						{
							label:  this.$t('login.isMoto'),
							value: ''
						}
					]
				},
				previewData3: {
					label: '',
					list: [{
							label: this.$t('login.country'),
							value: '',
						}, {
							label: this.$t('login.addressDistrict'),
							value: ''
						}, {
							label: this.$t('login.Area'),
							value: ''
						}, {
							label: this.$t('login.County'),
							value: ''
						}, {
							label: this.$t('login.Township'),
							value: ''
						},
						{
							label: this.$t('login.Parish'),
							value: ''
						},
						{
							label:  this.$t('login.detailedAddress'),
							value: ''
						},
						{
							label: this.$t('login.HospitalSchool'),
							value: ''
						},
						{
							label: this.$t('login.GPSLocation'),
							value: ''
						},
						{
							label: this.$t('login.ShopAddress'),
							value: ''
						}
					]
				}

			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		onShow() {
			let that = this
			uni.setNavigationBarTitle({
				title: that.$t('login.information'),
			});
		},
		onLoad() {
			let that = this
		uni.setNavigationBarTitle({
			title: that.$t('login.information'),
		});
		let userObj = 	uni.getStorageSync('userObj')

		this.userObj = userObj
		this.previewData1.list[0].value = userObj.customerXing
		this.previewData1.list[1].value = userObj.customerMing
		this.previewData1.list[2].value = userObj.nickname
		this.previewData1.list[3].value = userObj.gender == 1?this.$t('login.male'):this.$t('login.female')
		this.previewData1.list[4].value = userObj.customerBirth
		this.previewData1.list[5].value = userObj.phone
		this.previewData1.list[6].value = userObj.customerIdNumber
		this.previewData1.list[7].value = getNewYMD()
		
		this.previewData2.list[0].value = userObj.agentAccount
		this.previewData2.list[1].value = userObj.agentName
		this.previewData2.list[2].value = userObj.guarantorName
		this.previewData2.list[3].value = userObj.guarantorId
		this.previewData2.list[4].value = userObj.guarantorPhone
		this.previewData2.list[5].value = userObj.guarantorAddress
		this.previewData2.list[6].value = userObj.customerHouse == 1?this.$t('login.rented'):this.$t('login.owned')
		this.previewData2.list[7].value = userObj.hasCar == 1?this.$t('login.yes'):this.$t('login.no')
		
		this.previewData3.list[0].value = userObj.customerRegion
		this.previewData3.list[1].value = userObj.customerRegion
		this.previewData3.list[2].value = userObj.customerDistrict
		this.previewData3.list[3].value = userObj.customerCounty
		this.previewData3.list[4].value = userObj.customerSubCounty
		this.previewData3.list[5].value = userObj.customerParish
		this.previewData3.list[6].value = userObj.customerDetailAddress
		this.previewData3.list[7].value = userObj.nearSchHos
		this.previewData3.list[8].value = userObj.gpsLocation
		this.previewData3.list[9].value = userObj.shopAddress
		},
		methods: {
			handleNext(){
				
				
				if(this.checkList.length > 0){
					console.log(this.userObj);
					registersav(this.userObj).then(res=>{
						console.log(res);
						if(res.code == 0 && res.success){
							uni.navigateTo({
								url:`/pages/login/audit/audit?type = 1&regRole=${this.userObj.regRole}`
							})
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
					
				}else{
					uni.$u.toast('Please agree to the service agreement first')
				}
			},
			checkboxChange(e) {
				if (e.length > 0) {
					this.btnPass = false
				} else {
					this.btnPass = true
				}
			},
			skipWebView() {

				uni.navigateTo({
					url: `/pages/webview/webview`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.infoConfirm {
		.mainBox {
			width: 100%;
			height: calc(100% - 150px);
			overflow-y: auto;
			border: 1px solid #ccc;
		}

		.btnModule {
			width: 100%;
			height: 70px;
			box-sizing: border-box;
			margin-top: 16px;
			padding: 16px;
			box-sizing: border-box;

			.checkboxBox {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: var(--subjectTextColor);
				margin-bottom: 16px;

				.skipWebView {
					font-size: 12px;
					line-height: 14px;
					color: var(--subjectColor);
				}
			}
		}

	}
</style>